<!--
 * @Date: 2023-04-27 14:30:33
 * @Description:
 * @LastEditors: hujingyang
 * @Author: hujingyang
 * @FilePath: \largeScreenDataVisualization\src\pages\eCharts\pieBorderRadius.vue
 * @IDE: Created by VScode.
-->
<template>
  <!-- 简单的案例 -->
  <div ref="pieBorderRadius" style="width: 100%; height: 100%" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const pieBorderRadius = ref(null);
const option = {
  tooltip: {
    trigger: "item",
  },
  // legend: {
  //   top: "5%",
  //   left: "center"
  // },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: true,
        formatter(param: any) {
          // correct the percentage
          return param.name + " (" + param.percent * 2 + "%)";
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: 40,
      //     fontWeight: 'bold'
      //   }
      // },
      labelLine: {
        show: true,
      },
      data: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "Email" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
      ],
    },
  ],
};
onMounted(() => {
  // 图表初始化
  const chart = echarts.init(
    pieBorderRadius.value as unknown as HTMLDivElement
  );
  chart.setOption(option);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>

<style scoped></style>
